<%@ include file="/WEB-INF/views/commonJSTL.jsp" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>${s_UserPharmacy.pharmacy.name}</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<%@ include file="/WEB-INF/views/commonResources.jsp" %>
<script src="<c:url value="/resources/js/jquery.jstree.js" />"></script>

<script type="text/javascript">
	$(function() {
		//Array para dar formato en español
		$.datepicker.regional['es'] = 
		{
		  closeText: 'Cerrar', 
		  prevText: 'Previo', 
		  nextText: 'Próximo',
		  
		  monthNames: ['Enero','Febrero','Marzo','Abril','Mayo','Junio',
		  'Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'],
		  monthNamesShort: ['Ene','Feb','Mar','Abr','May','Jun',
		  'Jul','Ago','Sep','Oct','Nov','Dic'],
		  monthStatus: 'Ver otro mes', yearStatus: 'Ver otro año',
		  dayNames: ['Domingo','Lunes','Martes','Miércoles','Jueves','Viernes','Sábado'],
		  dayNamesShort: ['Dom','Lun','Mar','Mie','Jue','Vie','Sáb'],
		  dayNamesMin: ['Do','Lu','Ma','Mi','Ju','Vi','Sa'],
		  dateFormat: 'dd/mm/yy', firstDay: 0, 
		  initStatus: 'Selecciona la fecha', isRTL: false};
		  $.datepicker.setDefaults($.datepicker.regional['es']);
	});

	$(document).ready(function(){	
		$("#formCompanyPharmacy").validate({
	        submitHandler: function(form) {
	       		form.submit();
	        }
	    });
		
		//permit only text
		$('.lettersOnly').keyup(function () {
	         if (this.value != this.value.replace(/[^A-Za-z\s]/g, '')) {
	            this.value = this.value.replace(/[^A-Za-z\s]/g, '');
	         }
	     });
		 
		//permit only numbers
		$('.numberOnlyNumber').keyup(function () {
	         if (this.value != this.value.replace(/[^0-9]/g,'')) {
	            this.value = this.value.replace(/[^0-9]/g, '');
	         }
	     });
				
		//edit Company      
	    $.fn.editar = function(idPharmacy,name,sigla){
		       $('#formPais').each(function(){
		       	  this.reset();
		       });
		       $("#titleForm").text("Modificar Pais");
		       $("#accion").val("1");
		       $("#idCountry").val(idCountry);
		       $("#name").val(name);
		       $("#sigla").val(sigla);
		       $("#dialog:ui-dialog").dialog("destroy");
		       $("#dialogo").dialog("open");
	     }		
	});
	/*Para el boton "Cancelar"*/
	function mainCompany(){
		location.href = "infoCompany?_menuId=3&_subMenuId=2&_optionId=1";	
	}
	
	/*Para las imagenes justo al momento de guardar*/
	function LimitAttach(tField,iType) {
	    file=tField.value;
	    if (iType==1) {
	    	extArray = new Array(".gif",".jpg",".png");
	    }
	    if (iType==2) {
	    	extArray = new Array(".swf");
	    }
	    allowSubmit = false;
	    if (!file) return;
	    while (file.indexOf("\\") != -1) file = file.slice(file.indexOf("\\") + 1);
		    ext = file.slice(file.indexOf(".")).toLowerCase();
		    for (var i = 0; i < extArray.length; i++) {
		    	if (extArray[i] == ext) {
		    		allowSubmit = true;
		    		break;
		    	}
	   	}
	    if (allowSubmit) {
	    } else {
	    tField.value="";
	    alert("Usted sólo puede subir archivos con extensiones " + (extArray.join(" ")) + "\nPor favor seleccione un nuevo archivo");
	    }
    }
	
	/*Validando el email*/
	function validateEmail(emailField){
        var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;

        if (reg.test(emailField.value) == false) 
        {
            alert('Dirección de correo electrónico no válida');
            return false;
        }
        return true;
	}
	
	/*Para mostrar las imagenes en el misma posicion*/
	$(window).load(function(){
		$(function() {
			$('#imagen').change(function(e) {
				addImage(e); 
		    });
			
			$('#myReportLogo').change(function(e2) {
				addImage2(e2); 
		    });
			
			$('#myLogo').change(function(e3) {
				addImage3(e3); 
		    });
		
		    function addImage(e){
		      var file = e.target.files[0],
		      imageType = /image.*/;
		    
				if (!file.type.match(imageType))
				return;
		  
		      var reader = new FileReader();
		      reader.onload = fileOnload;
		      reader.readAsDataURL(file);
		    }
		    
		    function addImage2(e2){
				var file = e2.target.files[0],
			    imageType = /image.*/;
			    
				if (!file.type.match(imageType))
					return;
			    var reader = new FileReader();
			    reader.onload = fileOnload2;
			    reader.readAsDataURL(file);
			 }
		    function addImage3(e3){
			    var file = e3.target.files[0],
			    imageType = /image.*/;
			    
				if (!file.type.match(imageType))
					return;
			  
			    var reader = new FileReader();
			    reader.onload = fileOnload3;
			    reader.readAsDataURL(file);
			}
		  
			function fileOnload(e) {
		      	var result=e.target.result;
		      	$('#imgSalida').attr("src",result);
		    }
		    function fileOnload2(e) {
				var result=e.target.result;
			    $('#imgSalida2').attr("src",result);
			}
			function fileOnload3(e) {
			    var result=e.target.result;
			    $('#imgSalida3').attr("src",result);
			}
		});
	});
</script>
</head>

<body>
<c:set var="idPharmacy" value="${param._pharmacyId}"/>
<div id="top-wrap">
	<%@include file="../../../head.jsp"  %>
	<div id="bodySpace">
		
	    <div class="clearfix" id="middle" style="position: absolute">  <!-- aqui va la ruta -->
	        <!-- aqui va el arbol de entrada -->
	        <div id="breadcrumb">
	            <ul>
                	<li><a href="mainFront?v=1">Home</a></li>
                    <li><span style="color:#666">Operaciones</span></li>
                    <li><span style="color:#666">Empresa</span></li>
                    <li class="current-page"><span class="end"><span class="middle">Datos Empresa</span></span></li>
                </ul>
	        </div>
	    </div>
	    
	    <div id="principal">
            <!-- izquierda -->
            <div class="cuerpo2y" style="border: 0px solid"><br/><br/><!-- estos break son necesarios ya q uso absolute en css  cuerpo izquierdo-->
                <div class="izq">
					<%@include file="../../../bodyIzq.jsp" %>	
                </div>
                
                <div class="medio" style="border: 0px solid">
					
					<h2 class="decorado">Editando datos de la Empresa</h2><br/>
					
					<!-- form method="post" action="Operaciones" name="formEmpresa" id="formEmpresa"-->
					<form method="post" id="formCompanyPharmacy" name="formCompanyPharmacy" commandName="company" enctype="multipart/form-data">
						<c:forEach var="company" items="${ActivePharmacy}">
                            <input type="hidden" name="idPharmacy" id="idPharmacy" value="${idPharmacy}" />

		                    <div style="clear:both;">
			                    <label class="form_align30" >Nombre: </label>
					            <input type="text" name="name" id="name" value="${company.name}" class="required form_input_align" title="Ingrese Nombre" maxlength="40" placeholder="texto"/>
					            <label class="error">*</label> 
		                    </div>
							<div style="clear:both;">
			                    <label class="form_align30" >Sigla: </label>
			                    <input type="text" name="initials" id="initials" value="${company.initials}" class="required form_input_align lettersOnly" title="Ingrese Sigla" maxlength="5" placeholder="letras"/>
		                        <label class="error">*</label>
		                    </div>
		                    <div style="clear:both;">
				                <label class="form_align30" >Razon Social: </label>
				                <input type="text" name="socialReason" id="socialReason" value="${company.socialReason}" class="required form_input_align" title="Ingrese Razon Social" maxlength="40" placeholder="texto"/>
				                <label class="error">*</label>
		                    </div>
		                    <div style="clear:both;">
				                <label class="form_align30" >Nit: </label>
				                <input type="text" name="nit" id="nit" value="${company.nit}" class="required form_input_align numberOnlyNumber" title="Ingrese Nit" maxlength="40" placeholder="números"/>
				                <label class="error">*</label>
		                    </div>
		                    <div style="clear:both;">
				                <label class="form_align30" >Dirección: </label>
				                <textarea name="address" id="address"  rows="3" cols="16" maxlength="150" title="Ingrese una Direccion." >${company.address}</textarea><br/>
		                    </div>
		                    <div style="clear:both;">
				                <label class="form_align30" >Telefono: </label>
				                <input type="text" name="phone" id="phone" value="${company.phone}" class="form_input_align numberOnlyNumber" title="Ingrese Telefono" maxlength="40" placeholder="números"/>
		                    </div>
		                    <div style="clear:both;">
				                <label class="form_align30" >Telefono2: </label>
				                <input type="text" name="phoneRef" id="phoneRef" value="${company.phone2}" class="form_input_align numberOnlyNumber" title="Ingrese Telefono" maxlength="40" placeholder="números"/>
		                    </div>
							<div style="clear:both;">
					            <label class="form_align30" >Email: </label>
					            <input type="text" name="email" id="email" value="${company.email}" class="form_input_align" title="Ingrese Email" maxlength="40" placeholder="name@example.com" onblur="validateEmail(this);"/>
			                </div>
			                <div style="clear:both;">
					            <label class="form_align30" >Email2: </label>
					            <input type="text" name="emailRef" id="emailRef" value="${company.email2}" class="form_input_align" title="Ingrese Email" maxlength="40" placeholder="name@example.com" onblur="validateEmail(this);"/>
			                </div>
			                <div style="clear:both;">
					            <label class="form_align30" >Sitio Web: </label>
					            <input type="text" name="website" id="website" value="${company.website}" class="form_input_align" title="Ingrese Su Sitio Web" maxlength="40" placeholder="https://example"/>
			                </div>
							<div style="clear:both;">
								<label class="form_align30">Fecha de Creación :</label>
								<c:set var="dayPartsFechaIni" value="${fn:split(company.dateCreation,'-')}" />
			                    <c:set var="TemdayPartsFechaIni" value="${dayPartsFechaIni[2]}/${dayPartsFechaIni[1]}/${dayPartsFechaIni[0]}" />
								<input name="birthdate" id="birthdate" value="${TemdayPartsFechaIni}" class="form_input_align" readonly="true" onclick="$(this).datepicker({changeMonth: true,changeYear: true,numberOfMonths: 1});$(this).datepicker().datepicker('show');" title="Ingrese una fecha" placeholder="dd/mm/AAAA"/>		
							</div> 
			                    
							<div style="clear:both">
							    <label class="form_align30">Logo de la Empresa:</label>
							    <table width="50%" column="2" >
							    	<tr>
							    		<td width="140">
							    			<input type="hidden" name="imageMain" id="imageMain" value="${company.mainImage}" />
							    			<center>
							    				<c:choose>
													<c:when test="${company.mainImage != null}">
														<img id="imgSalida" src="<c:url value="/resources/imageCompany/${company.mainImage}"/>" border="1" height="30" width="30"/></td>
													</c:when>
													<c:otherwise>
														<img id="imgSalida" src="<c:url value="/resources/imageCompany/logo.png"/>" border="1"  height="30" width="30"/></td>
													</c:otherwise>
												</c:choose>
											</center>
							    		</td>
							    		<td>
							    			<input type="file" name="imagen" id="imagen" onblur="LimitAttach(this,1);" />
							    		</td>
							    	</tr>
							    </table>	
							</div>
							    
							<div style="clear:both">
							    <label class="form_align30">Logo del Reporte:</label>
							    <table width="50%" column="2" >
							    	<tr>
							    		<td width="140">
							    			<input type="hidden" name="imageReportLogo" id="imageReportLogo" value="${company.reportLogo}" />
							    			<center>
							    				<c:choose>
							    					<c:when test="${company.reportLogo != null}">
													
														<img src="<c:url value="/resources/imageCompany/${company.reportLogo}"/>" border="1" height="40" width="90" id="imgSalida2"/></td>
													</c:when>
													<c:otherwise>
														<img src="<c:url value="/resources/imageCompany/reporte.png"/>" border="1" height="40" width="90" id="imgSalida2"/></td>
													</c:otherwise>
												</c:choose>
											</center>
							    		</td>
							    		<td>
							    			<input class="inputNormal margin_right" type="file" name="myReportLogo" id="myReportLogo" onblur="LimitAttach(this,1);"/>
							    		</td>
							    	</tr>
							    </table>	
							</div>
							    
							<div style="clear:both">
							    <label class="form_align30">Logo de la Factura:</label>
							    	<table width="50%" column="2" >
							    		<tr>
							    			<td width="140">
							    				<input type="hidden" name="imageLogo" id="imageLogo" value="${company.logo}" />
							    				<center>
							    				<c:choose>
													<c:when test="${company.logo != null}">
														<img src="<c:url value="/resources/imageCompany/${company.logo}"/>" border="1" height="40" width="40" id="imgSalida3"/></td>
													</c:when>
													<c:otherwise>
														<img src="<c:url value="/resources/imageCompany/logo.png"/>" border="1" height="40" width="40"  id="imgSalida3"/></td>
													</c:otherwise>
												</c:choose>
												</center>
							    			</td>
							    			<td>
							    				<input class="inputNormal margin_right" type="file" name="myLogo" id="myLogo"  onblur="LimitAttach(this,1);"/>
							    			</td>
							    		</tr>
							    	</table>	
							    </div>
							    
							   	<br/><br/>
							    <div style="clear: both">
									<label class="form_align30">&nbsp;</label>
		                    		
		                    		<fmt:message key="button.register" var="varSubmit" />
									<c:if test="${company.pharmacyId != null}">
										<fmt:message key="button.modify" var="varSubmit" />
									</c:if>	
		                    		<input type="submit" value="${varSubmit}" name="action"  class="boton" title="<fmt:message key="onclick.for"/> ${varSubmit}" />&nbsp;&nbsp;&nbsp;&nbsp;
									<input type="button" value="<fmt:message key="button.cancel"/>" name="action" onclick="mainCompany()" class="boton" title="<fmt:message key="onclick.cancel"/>"/>
								</div>    	    					    	  
                       		</c:forEach>
					</form>
					
					
                </div>
            </div><!--end of leftPan-->
            
            <div class="yDer" style="border: 1px solid #ccc;">
                  <%@include file="../../../notices.jsp" %>                       
            </div><!--end of rightPan-->
        </div><!-- end main content -->
	</div>
</div>
</body>
</html>
